<template>
  <el-container>
    <el-header>
      <!--头部-->
      <Header></Header>
    </el-header>
    <br>
    <el-main>
      <!--搜索-->
      <Search :num="buyCarNum"></Search>
      <br>
      <el-row>
        <el-col :span="2" >&nbsp;</el-col>
        <el-col :span="10" >

            <img :src="require('../../assets/images/'+product.src)" width="470" height="450">

        </el-col>
        <el-col :span="10">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="华清自营">
              <span>{{product.title}}</span>
            </el-form-item>

            <el-form-item label="品牌">
              <span>{{product.brandName}}</span>
            </el-form-item>
            <el-form-item label="类型">
            <span>{{product.proName}}</span>
          </el-form-item>
            <el-form-item label="价格">
              <span>{{product.price}}</span>
            </el-form-item>
            <el-form-item label="库存">
              <span>{{product.stockNum}}</span>
            </el-form-item>
            <el-form-item label="购买数量">
              <el-input-number v-model="num"  :min="1"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addBuyCar">加入购物车</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="2" >&nbsp;</el-col>
      </el-row>
    </el-main>
    <Footer></Footer>
  </el-container>
</template>

<script>
  import Header from "./myComponents/Header";
  import Search from "./myComponents/Search";
  import Footer from "./myComponents/Footer";
  export default {
    name: "ProductDetail",
    components:{
      Header,
      Search,
      Footer
    },
    data(){
      return{
        product:{},
        num:1,
        car:{ //购物车对象
          userId:"",
          goodsId:"",
          goodsName:"",
          num:"",
          price:"",
          src:"",
        },
        buyCarNum:3 //购物车数量
      }
    },
    methods:{
      addBuyCar(){//添加购物车
        this.car.userId =1;
        this.car.goodsId = this.product.goodsId;
        this.car.goodsName = this.product.title;
        this.car.num = this.num;
        this.car.price = this.product.price;
        this.car.src = this.product.src;
        const self = this;
        //发送ajax请求
        const http = this.$http.get("/car/addCar",{params:this.car});
        //成功回调
        http.then(function (rs) {
          console.log(rs.data);
          if(rs.data.code==200){
            //遍历赋值
            self.$message(rs.data.msg);
            //添加购物车数量
            self.buyCarNum = self.buyCarNum+1;

          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$alert("服务器异常，请检查地址或者服务器是否启动");
        })



      },
      queryData(id){
        const self = this;
        //发送ajax请求
        const http = this.$http.get("/goods-info/queryGoodsByGoodsId",{params:{"goodsId":id}});
        //成功回调
        http.then(function (rs) {
          console.log(rs.data);
          if(rs.data.code==200){
           self.product = rs.data.data;
          }else{
            self.$message(rs.data.msg);
          }
        });
        http.catch(function () {
          self.$alert("服务器异常，请检查地址或者服务器是否启动");
        })
      }
    },
    created() {
      this.queryData(this.$route.query.goodsId);
    }

  }
</script>

<style scoped>

</style>
